<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Cache-Control" content="no-siteapp">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1, minimum-scale=1, maximum-scale=1">
<meta name="renderer" content="webkit">
<meta name="google" value="notranslate">
<meta name="robots" content="index,follow">


<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Akkuman">
<meta name="twitter:description" content="Akkuman的技术博客">
<meta name="twitter:image:src" content="http://127.0.0.1:8000/images/avatar.png">

<meta property="og:url" content="http://127.0.0.1:8000">
<meta property="og:title" content="Akkuman">
<meta property="og:description" content="Akkuman的技术博客">
<meta property="og:site_name" content="Akkuman">
<meta property="og:image" content="http://127.0.0.1:8000/images/avatar.png">
<meta property="og:type" content="website">
<meta name="robots" content="noodp">

<meta itemprop="name" content="Akkuman">
<meta itemprop="description" content="Akkuman的技术博客">
<meta itemprop="image" content="http://127.0.0.1:8000/images/avatar.png">

<link rel="canonical" href="http://127.0.0.1:8000">

<link rel="shortcut icon" href="/favicon.png">
<link rel="apple-itouch-icon" href="/favicon.png">

<link type="text/css" rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="/bundle/css/prism.css">
<link type="text/css" rel="stylesheet" href="/bundle/css/zoom.css">
<link type="text/css" rel="stylesheet" href="/bundle/css/main.css">
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>



<script>var cPlayers = [];var cPlayerOptions = [];</script>


<script type="text/javascript">
    var timeSinceLang = {
        year: '年前',
        month: '个月前',
        day: '天前',
        hour: '小时前',
        minute: '分钟前',
        second: '秒前'
    };
    var root = '';
</script>


        <meta name="keywords" content="推荐向,">
        <meta name="description" content="推荐一个静态博客兼笔记的工具：WDTP">
        <meta name="author" content="Akkuman">
        <title>推荐一个静态博客兼笔记的工具：WDTP</title>
    </head>
    <body>
        
        <header id="header" class="clearfix">
  <div class="container-fluid">
      <div class="row">
          <div class="logo">
              <div class="header-logo">
                <script>
                  var getwbclass = function() {
                    var wbclass = ['b', 'w'];
                    return wbclass[Math.floor(Math.random()*wbclass.length)];
                  }
                  var sitetitle = "Akkuman";
                  for (i in sitetitle) {
                    document.write('<a href="/"><span class="' + getwbclass() + ' titlechar">' + sitetitle.charAt(i) + '</span></a>');
                  }          
                  
                </script>
                
                <a id="btn-menu" href="javascript:isMenu();">
                    <span class="b">·</span>
                </a>
                <a href="javascript:isMenu1();">
                    <span id="menu-1" class="bf">1</span>
                </a>
                <a href="javascript:isMenu2();">
                    <span id="menu-2" class="bf">2</span>
                </a>
                <a href="javascript:isMenu3();">
                    <span id="menu-3" class="bf">3</span>
                </a>
              </div>
              <div id="menu-page">
                <a href="/archive.html"><li>归档</li></a>
                <a href="/tag.html"><li>标签</li></a>
                
                <a href="/atom.xml"><li>订阅</li></a>
                
                <a href="about.html"><li>关于</li></a>
              </div>
              <div id="search-box">
                  <div id="search">
                      <input autocomplete="off" type="text" name="s" id="menu-search" placeholder="搜索..." data-root="" />
                  </div>
              </div>
          </div>
      </div>
  </div>
  </header>
        <div id="body" class="clearfix">
            <div class="container-fluid">
                <div class="row">
                    <div id="main" class="col-12 clearfix" role="main">
                        <article class="posti" itemscope itemtype="http://schema.org/BlogPosting">
                            <h1 class="post-title" itemprop="name headline">推荐一个静态博客兼笔记的工具：WDTP</h1>
                            <div class="post-meta">
                                <p>
                                    Written by <a itemprop="name" href="/about.me.html" rel="author">Akkuman</a> with ♥ on <time datetime="1491049671" itemprop="datePublished"></time> in <a href="/tag/%e6%8e%a8%e8%8d%90%e5%90%91/index.html">推荐向 </a>
                                </p>
                            </div>
                            <div class="post-content" itemprop="articleBody">
                                <h2>简介</h2>

<p>WDTP（山湖录）不止是一款开源免费的GUI桌面单机版静态网站生成器和简单方便的前端开发工具，更是一款跨平台的集笔记、录音、个人知识管理、写作/创作、博客/网站内容与样式管理等功能于一体的多合一内容处理/管理器，同时还是一款高度追求用户体验的Markdown文本编辑器和一款方便强大的录音机。本软件研发的核心思想是：<strong>简洁高效、轻灵优雅、先进强悍、操作简单</strong>。</p>

<p><img src="" data-src="http://underwaysoft.com/works/wdtp/media/wdtp-main.jpg" alt="" /></p>

<p>WDTP（山湖录）可运行于macOS和Windows系统下，旨在提高这两大平台下所有写作/分享者的生产力及生产效率，节约耗时，减少无谓的智能、体力与资源消耗。它适合于以下群体：</p>

<ul>
<li>以<strong>文字、声音、图片、视频为主要内容</strong>的写作/记录/创作/分享者</li>
<li>职业或业余作家、小说家、编剧、技术类图书的作者及编撰者</li>
<li>经常记笔记或写点东西的人</li>
<li>写作极客</li>
<li>打算采用静态页面的个人博客</li>
<li>打算采用静态页面的中小企业
WDTP的全名是：<strong>Walden Tips</strong>，中文名称：<strong>山湖录</strong>，UnderwaySoft开发出品。设计、编程及维护：SwingCoder。立项日期：2016年8月2日，第一个内测版发布日期：2017年2月3日。</li>
</ul>

<h2>核心功能</h2>

<ul>
<li>创作。对职业作家（特别是技术作家以及需要大量构思与情节编排的文艺作家）来说比Pages、Word等WYSWYG类型的桌面文字软件更加高效、简洁和灵活的内容创作、章节管理与格式化排版工具。可方便地实现多章节（情节、场景、概念、故事主线等）并发创作/编辑、任意调序、随意归类等强大功能，完稿后一键即可成书。</li>
<li>笔记。可随时记录并管理学习笔记、读书笔记以及有一定篇幅并打算结构化保存、管理、检视和封装的零星随记、杂感等等。可定期将所有或任意分类（目录）下的笔记“装订成册”、集中输出，一键即可完成。</li>
<li>建站。强大而新颖的静态网站维护、编辑、生成、代码调试与内容、结构管理系统。特别适合追求全站真正静态化、内容至上的个人博客与中小企业官网。</li>
<li>Markdown编辑器。在保留并规范了大部分“正统”Markdown语法的基础上，WDTP根据大多数作者/作家的实际需求，增加了一批非常实用的新文本标记语法。比如：插入图注和表注、居中、靠右、多种类型的表格、图文混排、插入音视频媒体文件、内容注释、跨文档扩展标记等等。该编辑器针对Windows系统和macOS系统（非Retina显示屏）对中文字体的渲染结果不尽人意等情况专门做了特殊优化与调整，使用户在输入、编辑时可获得更良好的体验。</li>
<li>以上几项，不仅可以文字输入，更可以语音输入，直接记录声音。这一点对不擅长文字表达的朋友或者记者、演员、各类主持人、音乐家、演奏家等群体来说非常方便。</li>
<li>WDTP还有极具实用价值的“复习/提醒”功能，文档隐身功能，文档缩略语功能和极其强悍的“智库”架构。
其他更多……</li>
</ul>

<p>在“笔记、写书、建站/博客、前端开发”这几个方面，WDTP（山湖录）无缝集成，一键切换。即：同一套内容，随时可生成上述任何一种类型，还可多种类型混合使用。</p>

<p><strong>程序采用c++语言编写，作者同时也是我十分敬重的一位程序员，如果想查看更多信息请访问他的<a href="http://underwaysoft.com/works/wdtp/index.html">项目主页</a>程序开源<a href="https://github.com/LegendRhine/WDTP">github地址</a></strong></p>

<h2>上手使用</h2>

<p>本来想说更多的，但是确实这款软件和其他的静态博客生成器不一样，拥有着方便的界面，支持english和中文，设置里面即可切换，相信只要你使用过，你就会使用它，能感受到他的方便快捷，如果想看更多玩法和说明请查看<a href="http://underwaysoft.com/works/wdtp/index.html">项目主页</a>，现在只支持两种模板book(用来作为笔记)和blog(用来生成静态博客)，不过作者说会逐渐增加主题，真的除了暂时主题匮乏之外(会前端的可以自己改改主题)，其他的功能相比于其他的静态博客生成器方便得不是一丁半点</p>

<p><strong>那么生成静态文件之后如何上传到自己的vps或者github pages或者coding pages呢？</strong></p>

<h3>上传到vps</h3>

<p>这个你可以使用常规的FTP或者Rsync或者其他方法上传，不过我推荐自己的做法(使用Resilio Sync)
如果你的服务器是windows那么你只需要去<a href="https://www.resilio.com/individuals/">Resilio Sync官网</a>下载，建议安装为服务，然后访问本机sync服务的网址，点击右上角添加文件夹添加你的网站根目录，然后复制读写key，本机安装Resilio sync客户端然后手动连接这个key到你的静态文件目录，具体可以查资料，这个不难
如果你的服务器是Linux，可以查看Resilio Sync网站上面的<a href="https://help.getsync.com/hc/en-us/articles/206178924">How to install Sync Package on Linux</a>，说明比较详细，安装好之后和上面的步骤一样，然后只要你本机挂着resilio sync软件，生成就可以即时同步。
trust me， 你将找到这个软件(Resilio Sync)更多的玩法，这软件之前的名字是btsync
当然，这只是我自己使用的方法，你也可以使用其他方法
至于上传到github pages或者coding pages，这个你需要会用git，进入静态文件目录，然后bash下执行</p>

<pre><code class="language-bash">git init
git add .
git commit //命令给文件一个仓库标记，做为仓库历史，便于以后在远程端查找
git remote add origin git@github.com:username/username.github.io.git
</code></pre>

<p>git@github.com:username/username.github.io.git的是你的git远端地址，至于为什么用这个是因为ssh创建公钥之后不用重复输入密码
**注: **<a href="https://coding.net/help/doc/account/ssh-key.html">如何生成ssh公钥</a>这篇文章是以coding.net为例，不过你生成的id_rsa.pub内容同时也可以添加到github，基本相同的步骤，如果有什么疑问可以百度一下关键词为<code>github ssh公钥 配置</code></p>

<h3>添加评论功能</h3>

<ul>
<li><p>如果你不愿意麻烦可以使用邮箱来收集评论
打开qq邮箱点击上方<strong>设置-&gt;账户-&gt;邮我-&gt;使用邮我</strong>
然后获取代码
<img src="" data-src="https://ooo.0o0.ooo/2017/04/01/58df97595ea80.png" alt="snipaste_20170401_200420.png" />
复制<code>&lt;a target=&quot;_blank&quot; href=&quot;http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=64qAgJ6GioWYq5qaxYiEhg&quot; style=&quot;text-decoration:none;&quot;&gt;</code>
然后打开你的项目文件夹/themes/blog/article.html，把相应的地方改为下面例子这样</p>

<pre><code class="language-html">&lt;div class=page_navi align=&quot;center&quot;&gt;
&lt;b&gt;&lt;a target=&quot;_blank&quot; href=&quot;http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=64qAgJ6GioWYq5qaxYiEhg&quot; style=&quot;text-decoration:none;&quot;&gt;评论/咨询/讨论/留言&lt;/a&gt;&lt;/b&gt;
&lt;/div&gt;
</code></pre>

<p>然后别人点击评论就可以打开给你发邮件的入口</p></li>

<li><p>如果你想添加社会化评论系统
鉴于多说即将关闭，国内没被墙的无需北岸的第三方评论已经很少了，这里我用<a href="https://livere.com">来必力</a>做例子</p></li>

<li><p>注册登录(如果chrome浏览器注册之后一直登录不了请使用火狐)</p></li>

<li><p>点击顶栏安装，然后填好相关信息获取代码
<img src="" data-src="https://ooo.0o0.ooo/2017/04/01/58df9a0fc3eb5.png" alt="snipaste_20170401_201601.png" /></p></li>

<li><p>然后打开你的项目文件夹/themes/blog/article.html，把原先的评论代码删除掉，在合适的地方插入上方代码，我插入完之后的article.html例子如下
```html
&lt;!doctype html&gt;
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="WDTP by UnderwaySoft">
<meta name="Author" content="{{author}}">
<meta name="Keywords" content="{{keywords}}">
<meta name="Description" content="{{description}}">
<link rel="stylesheet" type="text/css" href="{{siteRelativeRootPath}}add-in/style.css"/>
<title>{{title}}</title>
</head>
<body>
<p>
{{siteLogo}}
{{siteMenu}}
<hr>
{{siteNavi}}
{{content}}
<hr>
{{createAndModifyTime}}</p>

<div align=center><h5><p style="background:PowderBlue">
	    本文版权：{{siteLink}} &emsp;
		共享协议：<a href='http://creativecommons.org/licenses/by-nc-nd/2.5/deed.zh' target='_blank'>署名-非商业使用-禁止演绎</a></h5>
</div></li>
</ul>

<p><hr>
  {{previousAndNext}}</p>

<p>{{ad}}
  <p>
  {{random}}
  <hr>
	<!-- 来必力City版安装代码 -->
	<div id="lv-container" data-id="city" data-uid="MTAyMC8yODAwMC80NTc3">
		<script type="text/javascript">
			(function(d, s) {
				var j, e = d.getElementsByTagName(s)[0];</p>

<p>				if (typeof LivereTower === &lsquo;function&rsquo;) { return; }</p>

<p>				j = d.createElement(s);
				j.src = &lsquo;<a href="https://cdn-city.livere.com/js/embed.dist.js'">https://cdn-city.livere.com/js/embed.dist.js'</a>;
				j.async = true;</p>

<p>				e.parentNode.insertBefore(j, e);
			})(document, &lsquo;script&rsquo;);
		</script>
	<noscript> 为正常使用来必力评论功能请激活JavaScript</noscript>
	</div>
	<!-- City版安装代码已完成 -->
  {{contact}}
  {{bottomCopyright}}</p>

<p></body>
</html>
```
4. 最后的效果如图
<img src="" data-src="https://ooo.0o0.ooo/2017/04/01/58df9adb69d5f.png" alt="snipaste_20170401_201926.png" /></p>

<h3>最后要说的</h3>

<p>这个工具确实是十分方便的，如果你作为笔记，可以使用坚果云来同步，同时它可以打包你的数据，多说无益，试用之后你会感受到它的强大</p>

<p><strong>本文部分转自<a href="http://underwaysoft.com/works/wdtp/download.html">Underwaysoft</a></strong></p>

                            </div>
                            <div style="display:block;" class="clearfix">
                                <section style="float:left;">
                                    <span itemprop="keywords" class="tags">
                                        tag(s): <a href="/tag/%e6%8e%a8%e8%8d%90%e5%90%91/index.html">推荐向 </a>
                                    </span>
                                </section>
                                <section style="float:right;">
                                    <span><a id="btn-comments" href="javascript:isComments();">show comments</a></span> · <span><a href="javascript:goBack();">back</a></span> · 
                                    <span><a href="/">home</a></span>
                                </section>
                            </div>
                            



<div id="comments" class="gen">
    <script>
        document.write('<section id="disqus_thread"></section>');
        var site_comment_load = function disqus() {
            var d = document, s = d.createElement('script');
            s.src = '//Akkum4n.disqus.com/embed.js';
            s.setAttribute('data-timestamp', +new Date());
            (d.head || d.body).appendChild(s);
        }
    </script>
</div>

                        </article>
                    </div>
                </div>
            </div>
        </div>
        <footer id="footer" role="contentinfo">
    <div class="container-fluid">
        <div class="row">
        <div class="col-12">
            &copy; 
            <script type="text/javascript">
                document.write(new Date().getFullYear());
            </script>
            <a href="/">Akkuman</a>.
            Using <a target="_blank" href="http://www.chole.io/">Ink</a> & <a target="_blank" href="/">Story</a>.
        </div>
        </div>
    </div>
</footer>

<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="/bundle/js/prism.js"></script>
<script src="/bundle/js/zoom-vanilla.min.js"></script>
<script src="/bundle/js/main.js"></script>

<script>
    window.onload=function(){
        if (window.location.hash!='') {
          var i=window.location.hash.indexOf('#comment');
          var ii=window.location.hash.indexOf('#respond-post');
          if (i != '-1' || ii != '-1') {
            document.getElementById('btn-comments').innerText='hide comments';
            document.getElementById('comments').style.display='block';
          }
        }
    }

    function isMenu(){
        if(document.getElementById('menu-1').style.display=='inline'||document.getElementById('menu-1').style.display=='block'){
            $('#search-box').fadeOut(200);
            $('#menu-page').fadeOut(200);
            $('#menu-1').fadeOut(500);
            $('#menu-2').fadeOut(400);
            $('#menu-3').fadeOut(300);
        } else {
            $('#menu-1').fadeIn(150);
            $('#menu-2').fadeIn(150);
            $('#menu-3').fadeIn(150);
        }
    }

    function isMenu1(){
        if(document.getElementById('menu-page').style.display=='block'){
            $('#menu-page').fadeOut(300);
        } else {
            $('#menu-page').fadeIn(300);
        }
    }

    function isMenu2(){
        if(document.getElementById('torTree')){
            if(document.getElementById('torTree').style.display=='block'){
                $('#torTree').fadeOut(300);
            } else {
                $('#torTree').fadeIn(300);
            }
        }
    }

    function isMenu3(){
        if(document.getElementById('search-box').style.display=='block'){
            $('#search-box').fadeOut(300);
        } else {
            $('#search-box').fadeIn(300);
        }
    }

    function isComments(){
        if(document.getElementById('btn-comments').innerText=='show comments'){
            document.getElementById('btn-comments').innerText='hide comments';
            document.getElementById('comments').style.display='block';
            site_comment_load();
        } else {
            document.getElementById('btn-comments').innerText='show comments';
            document.getElementById('comments').style.display='none';
        }
    }

    function Search404(){
        $('#menu-1').fadeIn(150);
        $('#menu-2').fadeIn(150);
        $('#menu-3').fadeIn(150);
        $('#search-box').fadeIn(300);
    }

    function goBack(){
        window.history.back();
    }
</script>


<script async>
"use strict";
(function(){
var cp = function(){
    var len = cPlayerOptions.length;
    for(var i=0;i<len;i++){
        var element = document.getElementById('player' + cPlayerOptions[i]['id'])
        while (element.hasChildNodes()) {
            element.removeChild(element.firstChild);
        };
        cPlayers[i] = new cPlayer({
            element: element,
            list: cPlayerOptions[i]['list'],
            });
    };
    cPlayers = [];cPlayerOptions = [];
};
var script = document.createElement('script');
script.type = "text/javascript";
script.src = "https://cdn.bootcss.com/cplayer/3.2.1/cplayer.js";
script.async = true;
if(script.readyState){  
    script.onreadystatechange = function(){
        if (script.readyState == "loaded" ||
            script.readyState == "complete"){
            script.onreadystatechange = null;
            cp();
        }
    };
}else{  
    script.onload = function(){
        cp();
    };
}
document.head.appendChild(script);
})();
</script>

    </body>
</html>
